HTML 5 Dersleri – Bölüm 3 – Video
Web üzerinde video
Şu ana kadar, bir web sayfası üzerinde video göstermenin standardı yoktu.
Günümüzde, flash gibi bir eklenti ile videolar gösterilmekte. Bununla beraber, tarayıcıların hepsi aynı tür eklentilere sahip değiller.
HTML5 video eklemek için bir standart belirlemekte, video elementi ile.
Video Formatları
Varsayılan olarak, video elementince desteklenen 3 tip format mevcut:
| Format | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
- Ogg = Ogg dosyaları Theora video codec’i ve Vorbis audio codec’i ile çalışır.
- MPEG4 = MPEG 4 dosyaları H.264 video codec’i ve AAC audio codec’i ile çalışır.
- WebM = WebM dosyaları VP8 video codec’i ve Vorbis audio codec’i ile çalışır.
Nasıl çalışır?
HTML5’te video göstermek için, ihtiyacınız olan şey:
| <video src=”movie.ogg” controls=”controls”> </video> |
Control özelliği oynatmayı eklemek için, durdurmayı, ve de ses kontrollerini…
Width ve height özelliklerini eklemek de iyi bir fikir olur elbette.
<video> ve </video>elementlerinin arasına içerik olarak yazı konulur video elementini desteklemeyen tarayıcılar için:
Yukarıdaki Ogg dosyasının örneğinde olduğu gibi, Opera, Chrome ve Firefox’ta çalışacaktır.
Çalışan bir video ekleyebilmek için Internet Explorer, Safari ve Chrome’un ileri sürümlerinde,MPEG4 ve WebM dosyasını eklemeliyiz.
Video elementi çoklu source elementine izin verir. Source elementi farklı video dosyalarına bağlanabilir. Tarayıcı ilk tanımlanmış olanı kullanacaktır:
Tüm <video> Özellikleri
| Özellik | Değer | Tanım |
|---|---|---|
| audio | muted | Sesin varsayılan durumunu tanımlar. Varsayılan olarak sessiz atanmıştır. |
| autoplay | autoplay | Sunuluyorken,hazır olur olmaz çalması anlamına gelir. |
| controls | controls | Sunuluyorken kontrol butonları bulunur play gibi |
| height | pixels | Video çaların yüksekliğini ayarlar. |
| loop | loop | Sunuluyorken, her bitişten sonra tekrar etme sayısını tanımlar. |
| poster | url | Video gösterimdeyken bir resime dair url belirlemeye yarar. |
| preload | preload | Sunumdayken, web sayfası ile beraber video da yüklenecektir, ve hazır olduğunda çalışacaktır. autoplay yok sayılır. |
| src | url | Calınacak videonun kaynağı,urlsi. |
| width | pixels | Video çaların genişliğini tanımlar. |